<template>
  <div class="home">
    <!-- 轮播图 -->
    <center-slideshow></center-slideshow>
    <!-- 中间区域 -->
    <div class="centre_box">
      <!-- 左边 -->
      <div class="center_l">
        <paly-list></paly-list>
        <album></album>
        <top-list></top-list>
      </div>
      <!-- 右边 -->
      <div class="center_r">
        <User></User>
      </div>
    </div>
  </div>
</template>

<script>
import CenterSlideshow from "@/pages/Home/CenterSlideshow";
import PalyList from "@/pages/Home/PalyList";
import User from "@/pages/Home/User";
import Album from "@/pages/Home/Album";
import TopList from "@/pages/Home/TopList";
export default {
  components: {
    CenterSlideshow,
    PalyList,
    User,
    Album,
    TopList,
  },
};
</script>

<style lang="less" scoped>
.centre_box {
  width: 984px;
  margin: 0 auto;
  display: flex;
  background-color: rgb(255, 255, 255);

  // 左边
  .center_l {
    // height: 283px;
    width: 730px;
    border: 1px solid rgb(204, 204, 204);
  }
  // 右边
  .center_r {
    width: 254px;
    // height: 283px;
    border: 1px solid rgb(204, 204, 204);
  }
}
/*当屏幕尺寸小于400px时，应用下面的CSS样式*/
@media screen and (max-width: 400px) {
  .centre_box {
    // background: #666;
    // width: 400px;
  }
}

</style>
